<template>
	<view>
		<view v-if="client=='web'" class="content">
			<view v-show="current=='QQ'"
				style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image src="@/static/other/QQ.png" style="width: 100px;height: 100px;"></image>
				<u-button @click="qqlogin" text="QQ一键登录" style="margin-top: 20px;" type="primary"
					shape="circle"></u-button>
				<u-button hoverStayTime="0" @click="current='登录'" text="其他方式" style="margin-top: 15px;" shape="circle">
				</u-button>
			</view>
			<p class="beian">
				皖ICP备2024032367号-2A</p>
			<u--form v-show="current=='登录'" :model="logindata" :rules="rules" ref="lForm">
				<u-form-item>
					<u--input v-model="logindata.loginuser" shape="circle" placeholder="请输入用户名" prefixIcon="account"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="password" ref="password">
					<u--input password v-model="logindata.password" shape="circle" placeholder="请输入密码" prefixIcon="lock"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<uni-captcha v-if="needCaptcha1" ref="captcha1" scene="login-by-pwd" v-model="logindata.captcha" />
				<u-button @click="login" text="确认登录" style="margin-top: 15px;" type="primary" shape="circle"></u-button>
				<u-button hoverStayTime="0" @click="current='注册'" text="立即注册" style="margin-top: 15px;"
					shape="circle"></u-button>
				<p style="display: flex;margin-top: 15px;justify-content: space-between;font-size: 14px;"><span
						style="color: #999999;" @click="current='QQ'">QQ登录</span><span style="color: #999999;"
						@click="help">忘记密码？</span></p>
			</u--form>
			<u--form v-show="current=='注册'" :model="registerdata" :rules="rules" ref="rForm">
				<u-form-item prop="nickname">
					<u--input v-model="registerdata.nickname" shape="circle" placeholder="请输入昵称" prefixIcon="edit-pen"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="username">
					<u--input v-model="registerdata.username" shape="circle" placeholder="请输入用户名" prefixIcon="account"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="password">
					<u--input password v-model="registerdata.password" shape="circle" placeholder="请输入密码"
						prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="password">
					<u--input password v-model="password" shape="circle" placeholder="请再次输入密码" prefixIcon="lock-open"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<uni-captcha v-if="needCaptcha2" ref="captcha2" scene="register" v-model="registerdata.captcha" />
				<u-button @click="register" text="立即注册" style="margin-top: 15px;" type="primary"
					shape="circle"></u-button>
				<u-button hoverStayTime="0" @click="current='登录'" text="返回登录" style="margin-top: 15px;"
					shape="circle"></u-button>
				<p style="display: flex;margin-top: 15px;justify-content: flex-end;font-size: 14px;"><span
						style="color: #999999;" @click="help">无法注册？</span></p>
			</u--form>
		</view>
	</view>
</template>

<script>
	const uniIdCo = uniCloud.importObject("uni-id-co")
	const db = uniCloud.database();
	export default {
		data() {
			return {
				password: null,
				needCaptcha1: false,
				needCaptcha2: true,
				current: "QQ",
				appshow: false,
				logindata: {
					loginuser: "",
					password: "",
					captcha: null
				},
				registerdata: {
					nickname: null,
					username: null,
					password: null,
					captcha: null
				},
				rules: {
					'nickname': [{
						type: 'string',
						required: true,
						message: '请填写用户昵称'
					}, {
						type: 'string',
						min: 2,
						max: 8,
						message: '用户昵称长度应为2-8位'
					}],
					'username': [{
						type: 'string',
						pattern: /^[a-zA-Z]+[0-9]*$/g,
						message: '用户名为字母或数字组合'
					}, {
						type: 'regexp',
						required: true,
						message: '请填写用户名'
					}, {
						type: 'string',
						message: '用户名长度应该为4-12位',
						min: 4,
						max: 12
					}],
					'password': [{
						type: 'string',
						message: '密码长度应该为2-16位',
						min: 4,
						max: 16
					}, {
						type: 'string',
						required: true,
						message: '请填写用户密码'
					}]
				}
			};
		},
		onShow() {
			// if (this.client == 'web') {
			// 	uni.reLaunch({
			// 		url: '../share/share?id=66a62a6f4b924751b050cf53'
			// 	});
			// }
		},
		methods: {
			click(e) {
				this.current = e.name
			},
			help() {
				uni.showModal({
					title: '常见问题',
					content: '1.忘记密码：由于用户注册账号时密码被加密记录，因此官方也无法协助找回密码，建议重新注册。\n2.无法注册：遇到无法注册问题请联系客服QQ：339851531。',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async qqlogin() {
				if (this.client == "web") {
					this.message("网页不支持", 'error')
					return
				}
				var that = this
				uni.login({
					provider: 'qq',
					success: async function(loginRes) {
						await uniIdCo.loginByQQ({
							accessToken: loginRes.authResult.access_token,
							accessTokenExpired: loginRes.authResult.expires_in
						}).then(e => {
							that.success("登录成功")
						})
					}
				});
			},
			success(msg) {
				this.message(msg)
				this.getUserInfo()
				uni.switchTab({
					url: '/pages/home3/home3'
				})
			},
			login() {
				// if (this.client == 'web') {
				// 	this.message("禁止登录", 'error')
				// 	return
				// }
				this.$refs.lForm.validate().then(e => {
					var zz = /^\w+@[a-z0-9]+\.[a-z]+$/i
					if (zz.test(this.logindata.loginuser)) {
						this.logindata.email = this.logindata.loginuser
					} else {
						this.logindata.username = this.logindata.loginuser
					}
					this.submitlogin()
				}).catch(errors => {
					console.log(errors);
				})
			},
			register() {
				if (this.client == 'web') {
					this.message("禁止注册", 'error')
					return
				}
				this.$refs.rForm.validate().then(e => {
					if (this.password != this.registerdata.password) {
						this.message("密码不一致", 'error')
						return null
					}
					uniIdCo.registerUser(this.registerdata).then(e => {
							this.success("注册成功")
						})
						.catch(e => {
							console.log(e);
						})
				}).catch(errors => {
					console.log(errors);
				})
			},
			submitlogin() {
				uniIdCo.login(this.logindata).then(e => {
					this.success("登录成功")
				}).catch(e => {
					if (e.errCode == 'uni-id-captcha-required') {
						this.needCaptcha1 = true
					} else if (this.needCaptcha1) {
						this.$refs.captcha1.getImageCaptcha()
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.beian {
		font-size: 14px;
		text-align: center;
		color: #909399;
		position: absolute;
		bottom: 10px;
		right: 0px;
		left: 0px;
	}

	.head {
		font-size: 18px;
		font-weight: 700;
		height: 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 20px;
		color: white;
		padding-top: 44pt;
	}

	.content {
		background-color: white;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0px;
		top: 164px;
		border-radius: 25px 25px 0 0;
		padding: 20px;
	}
</style>